<template>
	<view class="bottom">
		<view :class="{'nav-tab-active':home===0}" @click="$emit('toIndex', 0)">
			<image :src="home === 0?'/static/tabbar/home-art.svg':'/static/tabbar/home.svg'" ></image>
			<text>首页</text>
		</view>
		<view :class="{'nav-tab-active':home===1}" @click="$emit('toIndex', 1)">
			<image :src="home === 1?'/static/tabbar/fashionPurchase-art.svg':'/static/tabbar/fashionPurchase.svg'"></image>
			<text>潮购</text>
		</view>
		<view class="issue" @click="toIssue()">
			<image src="/static/tabbar/issue.svg"></image>
		</view>
		<view :class="{'nav-tab-active':home===2}" @click="$emit('toIndex', 2)">
			<image :src="home === 2?'/static/tabbar/explore-art.svg':'/static/tabbar/explore.svg'"></image>
			<text>探索</text>
		</view>
		<view :class="{'nav-tab-active':home===3}" @click="$emit('toIndex', 3)">
			<image :src="home === 3?'/static/tabbar/mine-art.svg':'/static/tabbar/mine.svg'"></image>
			<text>我的</text>
		</view>
	</view>
</template>
<script setup>
	const props = defineProps(['home'])
	const toIssue = () => {
		console.log('跳转到发帖');
		uni.switchTab({
			url:'/pages/publish/publish'
		})
	}
</script>

<style lang="scss">
	image{
		width: 48rpx;
		height: 48rpx;
	}
	.bottom {
		width:750rpx;
		height:98rpx;
		border-top:1px solid #eee;
		background:#fff;
		position:fixed;
		bottom:0;
		z-index:1000;
		@include flex(row,flex-start,center);
		
		view{
			width: 153rpx;
			height: 98rpx;
			display: flex;
			/* flex-direction: column;
			justify-content: center;
			align-items: center; */
			@include flex(column,center,center);
			text{
				font-weight: 400;
				font-size: 24rpx;
				color: #BFBFBF;
			}
		}
		.nav-tab-active{
			text{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}
		view.issue{
			width: 138rpx;
			height: 98rpx;
			image{
				width: 80rpx;
				height: 68rpx;
			}
		}
	}

	
</style>
